.header{width: 100%;margin: 0 20px 0 20px;}
.header #logo{float: left;margin: 5px 0 5px 0;}
.header nav{float: right;margin-right: 20px;}
ul{margin:0;padding:0;list-style:none}
ul.dropdown{position:relative;width:100%}
ul.dropdown li{float:left;width:100px;position:relative;}
ul.dropdown a:hover{color:#000}
ul.dropdown li a{display:block;color:#333333;position:relative;z-index:2000;text-align:center;text-decoration:none;font-weight:300;line-height: 90px;}
ul.dropdown li a:hover,ul.dropdown li a.hover{position:relative;color:#ff4c4c;}
ul.dropdown ul{display:none;position:absolute;top:90px !important;left:-65px;z-index:1000;box-shadow: 0 2px 5px #999999;margin-top:2px;padding-top:unset !important;}
ul.dropdown ul li{width:230px;background:#ffffff;}
ul.dropdown ul li a{display:block;color:#333333 !important;line-height:40px;}
ul.dropdown ul li a:hover{display:block;color:#ff4c4c !important}
.drop>a{position:relative}
.drop>a:after{content:"";position:absolute;right:5px;top:45%;border-left:5px solid transparent;border-top:5px solid #333;border-right:5px solid transparent;z-index:999}
.drop>a:hover:after{content:"";border-left:5px solid transparent;border-top:5px solid #fff;border-right:5px solid transparent}

.main{border-top:#ff4c4c solid 2px;margin: 0 20px 0 20px;}

.tools-box{width:500px;height:22px;float:left;}
.main .sidebar{margin-left: -320px;}
.main .tools{margin-right: 340px;}
.main .banner{margin-right: 340px;}
.main .codeEditor{margin-right:340px;}
.main .codeResult{margin-right:340px;}
.main .btn-groups{margin-right:340px;margin-bottom:15px;}
.main .location{text-align:left;line-height:50px;}
.main .location i{font-size:22px;color:#ff4c4c;}
.main .location a{font-size:16px;}

.tool{width: calc(100% / 4 - 17px);height:100px;border:1px solid #fdcfcf;color:#fdcfcf; cursor:pointer;float:left;margin-right:15px;margin-bottom:15px;}
.tool-header{height: 70px;}
.tool-header .tool-icon{width:70px;height:70px;float:left;line-height:70px;text-align:center;}
.tool-header .tool-icon i{font-size:50px;}
.tool-header .tool-title{float:left;font-size:16px;color:#666;line-height:70px;}
.tool-bottom{font-size:14px;color:#999;padding:0 5px 0 5px;}
.tool:hover{color:#ff4c4c;border:1px solid #ff4c4c;}

.btn-groups{margin-top:10px;}
.btn-groups a{float:left;margin:0;padding:0;border:none;padding: 0 10px 0 10px;height:35px;line-height:35px;font-size:14px;}
.btn-groups a:hover{opacity:.8;filter:alpha(opacity=80); text-decoration:none;}
.btn-groups .btn-format{background:#ff4c4c;color:#fff;border:#ff4c4c solid 1px;}
.btn-groups .btn-compress{background:#f2f2f2;color:#333;border-top:#c2c2c2 solid 1px;border-bottom:#c2c2c2 solid 1px;border-right:#c2c2c2 solid 1px;}
.btn-groups .btn-transform{background:#f2f2f2;color:#333;border-top:#c2c2c2 solid 1px;border-bottom:#c2c2c2 solid 1px;border-right:#c2c2c2 solid 1px;}
.btn-groups .btn-detransform{background:#f2f2f2;color:#333;border-top:#c2c2c2 solid 1px;border-bottom:#c2c2c2 solid 1px;border-right:#c2c2c2 solid 1px;}
.btn-groups .btn-copy{background:#75bd43;color:#fff;border-top:#75bd43 solid 1px;border-bottom:#75bd43 solid 1px;border-right:#75bd43 solid 1px;}
.btn-groups .btn-clear{background:#1387f4;color:#fff;border-top:#1387f4 solid 1px;border-bottom:#1387f4 solid 1px;border-right:#1387f4 solid 1px;}
.btn-groups .dbtype{width:150px;float:left;height:37px;line-height:37px;font-size:14px;}

.site-footer{margin-left: 0 !important;margin-right: 0 !important;}